<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新时代摄影</title>
    <link rel="stylesheet" href="exhibition.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            line-height: 24px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            margin: 0;
        }
        .main-left {
            float: left;
            width: 940px;
            background: #fff;
            padding: 30px;
            margin: 0;

        }
        .main-right{
            width: 200px;
            height: 504px;
            float: left;
            margin: 0;
            padding: 25px 20px;
        }
        /*主页左半部分的样式*/
        .mainsclearfix{
            height: 180px;
            display: block;
            margin-bottom: 60px;
        }
        .main-left{
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }

        .mainsclearfix>a{
            margin-bottom: 20px;
        }
        .main-left-llfl>img{
            margin: 0px;
            padding: 0px;
            float: left;
        }
        .main-left-lrfl{
            width: 540px;
            height: 197px;
            float: left;
            margin-left: 25px;
        }
        .main-left-lrfl>h3{
            font-size: 20px;
            color: #333333;
            height: 35px;
            margin: 0 0 8px 0;
            padding: 0px
        }
        .main-left-llfl>p{
            line-height: 22px;
            font-size: 15px;
            color: #707070;
            height: 66px;
            margin-bottom: 20px;
            font-weight: 500;
            overflow: hidden;
            padding: 0px;
        }
        .zuoclearfix{
            margin: 10px;
        }

        .zuoclearfix>.fl{
            float: left;
            position: relative;
            right: 8px;
            bottom: 2px;

        }
        .zuoclearfix>.fr{
            float: right;

        }

        /*主页右半部分*/
        .main-right{
            padding:20px 25px;
        }
        .main-right>p{
            font-size: 18px;
            color: #333333;
            margin-bottom: 10px;
            border-bottom: 1px solid
        }
        .gengduo>ul>li{
            padding: 20px 0 10px 0;
        }
        .gengduo>a{
            width: 148px;
            height: 28px;
            padding: 0px;
            border: 1px;

        }
        .gengduo>a>img{
            width: 28px;
            height: 18px;
            position: relative;

        }
    </style>
</head>
<body>

<div class="container">
        <!--主要内容左半部分开始-->
        <div class="container clearfix" style="border: blue">
            <div class="main-left" >
                <div class="mainsclearfix" id="main-exhibition" >
                    <a href="#" v-for="e in arr">
                        <div class="main-left-llfl">
                            <img :src="e.url"/>
                        </div>
                        <div class="main-left-lrfl">
                            <h3 >{{e.title}}</h3>
                            <p>{{e.content}}</p>
                            <div class="zuoclearfix">
                                <div class="fl">作者：{{e.author}}</div>
                                <div class="fr">{{e.created}}</div>
                            </div>
                        </div>
                    </a>
                </div>

                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
            <!--主要部分左半部分结束-->

            <!--主要部分右半部分开始-->
            <div class="main-right">
                <p>相关文章</p>
                <div class="gengduo">
                    <ul>

                        <li>
                            <a href="#">
                                <p class="clearfix"><img class="fl" src="" />封面嘉宾 | 陈桥顿...</p>
                                <span>2019-03-04</span>
                            </a>
                        </li>


                        <li>
                            <a href="#">
                                <p class="clearfix"><img class="fl" src="" />用手中的镜头，刻画石...</p>
                                <span>2019-03-04</span>
                            </a>
                        </li>


                        <li>
                            <a href="#">
                                <p class="clearfix"><img class="fl" src="" />记录完整事件 留下最...</p>
                                <span>2019-03-04</span>
                            </a>
                        </li>


                        <li>
                            <a href="#">
                                <p class="clearfix"><img class="fl" src="" />摄影是身边的“好伙伴...</p>
                                <span>2019-03-04</span>
                            </a>
                        </li>


                        <li>
                            <a href="http://www.shumasheying.org.cn/themes/index/public/assets/images/syhd_dian.jpg">
                                <p class="clearfix"><img class="fl" src="" />走进光和影的瞬间，是...</p>
                                <span>2019-03-04</span>
                            </a>
                        </li>

                    </ul>
                    <a href="http://www.shumasheying.org.cn/themes/index/public/assets/images/syhd_dian.jpg">MORE
                        <img src="http://www.shumasheying.org.cn/themes/index/public/assets/images/jiantou.png" />
                    </a>
                </div>
            </div>
            <!--主要部分右半部分结束-->
        </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script>
    let vm = new Vue({
        el:"#main-exhibition",
        data:{
            arr:[],
        },
        created:function () {
            axios.get("/exh/selectAll").then(function (response) {
                vm.arr=response.data;
            })
        }
    })
</script>
</body>
</html>
